Composition Patterns

概述

Vercel 提供的 React 組件組合模式技能，旨在解決 Boolean Props 地獄問題，建立可擴展的組件架構。

關鍵內容

1. 核心問題：解決具有大量布爾屬性的組件設計問題

2. 避免 isCompact, showHeader, isRounded, hasBorder 等布爾參數氾濫

3. 主要模式：

4. Compound Components：自描述、可組合的組件結構
5. Context Providers：替代 Props Drilling

6. 顯式 Variants：替代布爾開關

7. 實現技術：

8. 使用 cva (class-variance-authority) 進行變體管理
9. 組件嵌套結構（如 Card.Body, Card.Content, Card.Footer）

來源

• raw/articles/ai-tools/claude-skills/05_vercel_agent_skills_react.md — 深度解析

相關

• Vercel Agent Skills — 所屬集合
• React — 技術棧
• Component Architecture — 架構概念